<template>
  <el-drawer :append-to-body="true" :visible.sync="$store.state.workflow.conditionDrawer" class="condition_copyer"
             direction="rtl" size="550px" title="条件设置"
  >
    <div class="demo-drawer__content">
      <div class="condition_content">
        <div v-for="(cond,index) in conditionList" :key="`conditionList`+index" class="condition_list">
          <span class="desc-text mt5">
            {{ index != 0 ? '或者' : '' }}
          </span>
          <i class="el-icon-circle-close text-danger" @click="conditionList.splice(index,1)" />
          <el-row v-for="(subCond,subIndex) in cond.subConditionList"
                  :key="`subConditionList`+subIndex"
                  :gutter="10"
                  align="middle"
                  class="p10"
                  type="flex"
          >
            <el-col :span="6">
              <el-select v-model="subCond.field" placeholder="请选择">
                <el-option
                  v-for="item in formFields"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-col>
            <el-col :span="6">
              <el-select v-model="subCond.op" placeholder="请选择">
                <el-option
                  v-for="item in opList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-col>
            <el-col :span="8">
              <el-input v-model="subCond.value" placeholder="请输入" />
            </el-col>
            <el-col :span="4">
              <i class="el-icon-plus icon text-success" @click="handleAddCondition(cond.subConditionList)" />
              <i class="el-icon-delete icon text-danger" @click="cond.subConditionList.splice(subIndex,1)" />
            </el-col>
          </el-row>
        </div>
        <el-button class="width-full" icon="el-icon-plus" @click="handleAddConditionList">
          添加条件组
        </el-button>
      </div>
      <div class="demo-drawer__footer clear">
        <el-button type="primary" @click="saveCondition">
          确 定
        </el-button>
        <el-button @click="$store.commit('updateCondition',false)">
          取 消
        </el-button>
      </div>
    </div>
  </el-drawer>
</template>

<script>

import {listFormFieldsRequest} from "@/api/project/form"

export default {
  components: {},
  props: ['formKey'],
  data() {
    return {
      conditionVisible: false,
      conditionList: [
        {
          subConditionList: [
            {
              field: null
            }
          ]
        }
      ],
      opList: [
        {
          value: 'eq',
          label: '等于'
        },
        {
          value: 'ne',
          label: '不等于'
        },
        {
          value: 'gt',
          label: '大于'
        },
        {
          value: 'ge',
          label: '大于等于'
        },
        {
          value: 'lt',
          label: '小于'
        },
        {
          value: 'le',
          label: '小于等于'
        },
        {
          value: 'like',
          label: '文字包含'
        },
        {
          value: 'noLike',
          label: '文字不包含'
        }
      ],
      formFields: []
    }
  },
  computed: {
    conditionsConfig1() {
      return this.$store.state.workflow.conditionsConfig
    }
  },
  watch: {
    conditionsConfig1(val) {
      this.conditionsConfig = val.value
      this.index = val.index
      this.branchNode = val.index != undefined ? this.conditionsConfig.branchNodes[val.index] : {conditionList: []}
      if (this.branchNode.conditionList) {
        this.conditionList = this.branchNode.conditionList
      }
    }
  },
  created() {
    listFormFieldsRequest(this.formKey).then((res) => {
      if (res.data) {
        this.formFields = res.data
      }
    })
  },
  methods: {
    saveCondition() {
      this.conditionsConfig.branchNodes[this.index].conditionList = this.conditionList
      this.$store.commit('updateCondition', false)
      this.$store.commit('updateConditionsConfig', {
        value: this.conditionsConfig,
        flag: true,
        id: this.$store.state.workflow.conditionsConfig.id
      })
    },
    handleAddConditionList() {
      this.conditionList.push({
        subConditionList: [
          {
            field: null
          }
        ]
      })
    },
    handleAddCondition(conditionList) {
      conditionList.push({
        field: null,
        op: null
      })
    }
  }
}
</script>

<style lang="scss">
.condition_copyer {
  .el-drawer__body {
  }

  .condition_content {
    padding: 20px 20px 0;
    height: 90%;
  }
}

.desc-text {
  color: #606266;
  margin-top: 10px;
  font-size: 15px;
}

.condition_list {
  padding: 10px;
  position: relative;

  .el-row {
    background-color: #f2f3f4;
  }

  &:hover {
    .el-icon-circle-close {
      display: inline-block;
    }
  }

  .icon {
    font-size: 16px;
    margin-right: 5px;
  }

  .el-icon-circle-close {
    position: absolute;
    right: 5px;
    top: 3px;
    z-index: 1;
    display: none;
  }

}
</style>
